<template>
  <s-layout :title="product.name || '产品详情'">
    <view class="detail-container">
      <scroll-view scroll-y class="content-scroll">
        <!-- 商品主图 -->
        <image class="product-main-image" :src="product.image" mode="widthFix" />

        <!-- 商品信息 -->
        <view class="product-info-card">
          <view class="product-name">{{ product.name }}</view>
          <view class="product-desc" v-html="product.description"></view>
          <view class="product-price">¥{{ currentPrice }}</view>
        </view>

        <!-- 杯型选择 -->
        <view class="spec-card" v-if="product.cupSpecs && product.cupSpecs.length > 0">
          <view class="spec-group" v-for="spec in product.cupSpecs" :key="spec.specId">
            <view class="spec-group-header">
              <view class="spec-group-name">{{ spec.specName }}</view>
            </view>
            <view class="spec-options">
              <button
                class="spec-option"
                v-for="option in spec.specValueList"
                :key="option.specValueId"
                :class="{ active: isCupSpecSelected(option.specValueId) }"
                @click="selectCupSpec(spec, option)"
              >
                <view class="option-name">{{ option.specValue }}</view>
                <view class="option-price" v-if="getCupSkuPrice(option.specValueId)">
                  ¥{{ getCupSkuPrice(option.specValueId) }}
                </view>
              </button>
            </view>
          </view>
        </view>

        <!-- 做法选择（温度、甜度等） -->
        <view class="spec-card" v-if="product.practiceSpecs && product.practiceSpecs.length > 0">
          <view class="spec-group" v-for="practice in product.practiceSpecs" :key="practice.practiceId">
            <view class="spec-group-header">
              <view class="spec-group-name">
                {{ practice.practiceName }}
                <text class="required-mark" v-if="practice.isRequired">*</text>
              </view>
            </view>
            <view class="spec-options">
              <button
                class="spec-option"
                v-for="option in practice.practiceValueList"
                :key="option.practiceValueId"
                :class="{ 
                  active: isPracticeSelected(practice.practiceId, option.practiceValueId),
                  recommend: option.isRecommend
                }"
                @click="selectPractice(practice, option)"
              >
                <view class="option-name">{{ option.practiceValue }}</view>
                <view class="option-price" v-if="option.price && option.price > 0">
                  +¥{{ option.price }}
                </view>
                <view class="recommend-tag" v-if="option.isRecommend">推荐</view>
              </button>
            </view>
          </view>
        </view>
      </scroll-view>

      <!-- 底部操作栏 -->
      <view class="bottom-bar">
        <view class="price-section">
          <text>¥</text>
          <text class="price-value">{{ currentPrice }}</text>
        </view>
        <button class="add-to-cart-btn" @click="addToCart">加入购物车</button>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import { parseOriginalPrice } from './common/product-utils.js';

const cateringStore = sheep.$store('catering');

const product = reactive({
  id: 0,
  name: '',
  image: '',
  description: '',
  basePrice: 0,
  originalPrice: 0,
  cupSpecs: [],  // ✅ 杯型规格（sortedSpecList）
  cupSkuList: [],  // ✅ 杯型SKU列表（goodsSkuList）
  practiceSpecs: []  // ✅ 做法规格（sortedPracticeList - 温度、甜度等）
});

// 选中的杯型SKU
const selectedCupSku = ref(null);
// 选中的做法（温度、甜度等）
const selectedPractices = reactive({});

onLoad(async (options) => {
  const passedProductId = options.productId || options.id;
  const passedShopId = options.shopId;

  if (!passedProductId) {
    uni.showToast({ title: '缺少商品信息', icon: 'error' });
    setTimeout(() => sheep.$router.back(), 1500);
    return;
  }
  
  const store = cateringStore.storeInfo;
  const shopId = passedShopId || (store && (store.shopId || store.id));
  if (!shopId) {
    uni.showToast({ title: '请先选择门店', icon: 'error' });
    setTimeout(() => sheep.$router.back(), 1500);
    return;
  }

  console.log('【霸王茶姬】加载商品详情:', { productId: passedProductId, shopId });
  
  uni.showLoading({ title: '加载中...' });
  try {
    const res = await sheep.$api.catering.getProductDetail(passedProductId, shopId);
    uni.hideLoading();
    
    if ((res.code === 0 || res.code === 200) && res.data) {
      parseProductData(res.data, options);
    } else {
      uni.showToast({ title: '加载商品失败', icon: 'none' });
      setTimeout(() => sheep.$router.back(), 1500);
    }
  } catch (error) {
    uni.hideLoading();
    console.error('【霸王茶姬】加载商品详情失败:', error);
    uni.showToast({ title: '加载商品失败', icon: 'error' });
    setTimeout(() => sheep.$router.back(), 1500);
  }
});

// 解析霸王茶姬商品数据
function parseProductData(apiData, options) {
  const details = apiData.data || apiData.details || apiData;
  
  // 基础信息
  product.id = details.id || options.productId;
  product.name = details.name || options.name || '';
  product.image = details.coverUrl || details.imageUrl || '';
  product.description = details.detail || '';
  
  // ✅ 使用系统自定义价格（优先级：后端salePrice > priceHead > 第三方价格）
  if (apiData.salePrice != null && apiData.salePrice > 0) {
    product.basePrice = parseFloat(apiData.salePrice);
  } else if (apiData.priceHead != null && apiData.priceHead > 0) {
    product.basePrice = parseFloat(apiData.priceHead);
  } else {
    product.basePrice = parseFloat(details.showPriceLow || 0);
  }
  product.originalPrice = parseOriginalPrice(apiData);

  console.log('【霸王茶姬】系统售价:', product.basePrice, '原价:', product.originalPrice);

  // ✅ 解析杯型规格（sortedSpecList）
  if (details.sortedSpecList && details.sortedSpecList.length > 0) {
    product.cupSpecs = details.sortedSpecList.map(spec => ({
      specId: spec.specId,
      specName: spec.specName,
      description: spec.description,
      specValueList: (spec.specValueList || []).map(val => ({
        specValueId: val.specValueId,
        specValue: val.specValue,
        isDefault: val.isDefault || 0
      }))
    }));
    console.log('【霸王茶姬】杯型规格:', product.cupSpecs.length, '组');
  }

  // ✅ 解析杯型SKU列表（goodsSkuList）
  // ⚠️ SKU模式：需要计算SKU差价，而不是直接使用第三方价格
  if (details.goodsSkuList && details.goodsSkuList.length > 0) {
    // ✅ 使用第一个SKU作为基础SKU（第三方API通常把默认SKU放在第一位，如大杯）
    // ⚠️ 重要：系统自定义价格对应第一个SKU（默认杯型）
    const baseSkuPrice = details.goodsSkuList.length > 0 
      ? parseFloat(details.goodsSkuList[0].salePrice || 0) 
      : 0;
    
    product.cupSkuList = details.goodsSkuList.map((sku) => {
      const currentSkuPrice = parseFloat(sku.salePrice || 0);
      // ✅ 计算SKU差价 = 当前SKU价格 - 基础SKU价格（第一个SKU）
      const priceDiff = currentSkuPrice - baseSkuPrice;
      
      return {
        skuId: sku.skuId,
        thirdPartySalePrice: currentSkuPrice,  // 第三方原始价格（用于后端验证）
        priceDiff: priceDiff,  // ✅ SKU差价（用于前端价格计算，可能为负数）
        orgPrice: parseFloat(sku.orgPrice || 0),
        channelPrice: parseFloat(sku.channelPrice || 0),
        skuItemList: sku.skuItemList || []
      };
    });
    
    console.log('【霸王茶姬】杯型SKU:', product.cupSkuList.length, '个');
    console.log('【霸王茶姬】基础SKU价格（第一个SKU，默认杯型）:', baseSkuPrice, '元');
    console.log('【霸王茶姬】SKU差价详情:', product.cupSkuList.map(s => ({
      skuId: s.skuId,
      第三方价格: s.thirdPartySalePrice,
      差价: s.priceDiff
    })));
  }

  // ✅ 解析做法规格（sortedPracticeList - 温度、甜度等）
  if (details.sortedPracticeList && details.sortedPracticeList.length > 0) {
    product.practiceSpecs = details.sortedPracticeList.map(practice => ({
      practiceId: practice.practiceId,
      practiceName: practice.practiceName,
      moreChoiceValue: practice.moreChoiceValue || 0,
      isRequired: practice.isRequired || 0,
      practiceValueList: (practice.practiceValueList || []).map(val => ({
        practiceValueId: val.practiceValueId,
        practiceValue: val.practiceValue,
        practiceCode: val.practiceCode,
        isDefault: val.isDefault || 0,
        isPrint: val.isPrint || 0,
        isRecommend: val.isRecommend || 0,
        price: val.price ? parseFloat(val.price) : null
      }))
    }));
    console.log('【霸王茶姬】做法规格:', product.practiceSpecs.length, '组');
  }

  // 初始化默认选择
  initializeDefaultSelection();
}

// 初始化默认选择
function initializeDefaultSelection() {
  // 1. 选择默认杯型
  if (product.cupSkuList && product.cupSkuList.length > 0) {
    // 找到默认杯型或第一个杯型
    const defaultSku = product.cupSkuList.find(sku => {
      return sku.skuItemList.some(item => {
        const spec = product.cupSpecs.find(s => s.specId === item.specId);
        if (spec) {
          const value = spec.specValueList.find(v => v.specValueId === item.specValueId);
          return value && value.isDefault === 1;
        }
        return false;
      });
    }) || product.cupSkuList[0];
    
    selectedCupSku.value = defaultSku;
    console.log('【霸王茶姬】默认杯型SKU:', defaultSku.skuId, 'SKU差价:', defaultSku.priceDiff, '元');
  }

  // 2. 选择默认做法（温度、甜度等）
  product.practiceSpecs.forEach(practice => {
    const defaultOption = practice.practiceValueList.find(opt => opt.isDefault === 1) || practice.practiceValueList[0];
    if (defaultOption) {
      selectedPractices[practice.practiceId] = defaultOption.practiceValueId;
    }
  });
  
  console.log('【霸王茶姬】默认做法:', JSON.parse(JSON.stringify(selectedPractices)));
}

// 判断杯型规格是否被选中
function isCupSpecSelected(specValueId) {
  if (!selectedCupSku.value) return false;
  return selectedCupSku.value.skuItemList.some(item => item.specValueId === specValueId);
}

// 获取杯型SKU的价格差（用于显示）
function getCupSkuPrice(specValueId) {
  const sku = product.cupSkuList.find(s => 
    s.skuItemList.some(item => item.specValueId === specValueId)
  );
  if (!sku) return null;
  
  // ✅ 显示价格差：第一个SKU不显示价格，其他SKU显示差价
  if (sku.priceDiff === 0) {
    return null;  // 基础杯型不显示价格
  }
  
  // 差价为正显示 +，为负显示 -
  const sign = sku.priceDiff > 0 ? '+' : '';
  return `${sign}${sku.priceDiff.toFixed(2)}`;
}

// 选择杯型
function selectCupSpec(spec, option) {
  // 找到对应的SKU
  const matchedSku = product.cupSkuList.find(sku => 
    sku.skuItemList.some(item => item.specValueId === option.specValueId)
  );
  
  if (matchedSku) {
    selectedCupSku.value = matchedSku;
    const diffText = matchedSku.priceDiff === 0 ? '基础杯型' : `差价 ${matchedSku.priceDiff > 0 ? '+' : ''}${matchedSku.priceDiff} 元`;
    console.log('【霸王茶姬】选择杯型:', option.specValue, diffText);
  }
}

// 判断做法是否被选中
function isPracticeSelected(practiceId, practiceValueId) {
  return selectedPractices[practiceId] === practiceValueId;
}

// 选择做法
function selectPractice(practice, option) {
  selectedPractices[practice.practiceId] = option.practiceValueId;
  console.log('【霸王茶姬】选择做法:', practice.practiceName, '-', option.practiceValue);
}

// 计算当前价格
// ✅ 最终价格 = 系统自定义价格 + SKU差价 + 做法加价
const currentPrice = computed(() => {
  // 基础价格：使用系统自定义价格
  let finalPrice = product.basePrice;
  
  // 加上SKU差价（杯型差价）
  if (selectedCupSku.value && selectedCupSku.value.priceDiff) {
    finalPrice += selectedCupSku.value.priceDiff;
    console.log('【霸王茶姬】加上SKU差价:', selectedCupSku.value.priceDiff, '元，累计:', finalPrice.toFixed(2), '元');
  }
  
  // 加上做法的额外价格
  product.practiceSpecs.forEach(practice => {
    const selectedId = selectedPractices[practice.practiceId];
    if (selectedId) {
      const option = practice.practiceValueList.find(opt => opt.practiceValueId === selectedId);
      if (option && option.price) {
        finalPrice += option.price;
        console.log('【霸王茶姬】加上做法加价:', option.practiceValue, option.price, '元，累计:', finalPrice.toFixed(2), '元');
      }
    }
  });
  
  console.log('【霸王茶姬】最终价格:', finalPrice.toFixed(2), '元 = 系统价格', product.basePrice, '+ SKU差价 + 做法加价');
  return finalPrice.toFixed(2);
});

// 构建规格描述文本
function buildSpecsText() {
  const parts = [];
  
  // 杯型
  if (selectedCupSku.value && selectedCupSku.value.skuItemList.length > 0) {
    selectedCupSku.value.skuItemList.forEach(item => {
      parts.push(item.specValue);
    });
  }
  
  // 做法
  product.practiceSpecs.forEach(practice => {
    const selectedId = selectedPractices[practice.practiceId];
    if (selectedId) {
      const option = practice.practiceValueList.find(opt => opt.practiceValueId === selectedId);
      if (option) {
        parts.push(option.practiceValue);
      }
    }
  });
  
  return parts.join('/');
}

// 加入购物车
function addToCart() {
  // 验证必选做法
  for (const practice of product.practiceSpecs) {
    if (practice.isRequired && !selectedPractices[practice.practiceId]) {
      uni.showToast({ 
        title: `请选择${practice.practiceName}`, 
        icon: 'none' 
      });
      return;
    }
  }
  
  if (!selectedCupSku.value) {
    uni.showToast({ title: '请选择杯型', icon: 'none' });
    return;
  }
  
  // 构建 selected 数据（做法选择）
  const selectedProducts = product.practiceSpecs.map(practice => {
    const selectedId = selectedPractices[practice.practiceId];
    if (!selectedId) return null;
    
    // ✅ 查找选中的做法选项，获取额外价格
    const option = practice.practiceValueList.find(opt => opt.practiceValueId === selectedId);
    const extraPrice = option && option.price ? option.price : 0;
    
    return {
      linkId: practice.practiceId,  // 做法ID（如：温度、甜度）
      productId: selectedId,  // 做法选项ID
      quantity: 1,
      selAmount: extraPrice  // ✅ 做法的额外费用
    };
  }).filter(item => item !== null);  // 过滤掉未选择的

  const cartItem = {
    id: product.id,
    name: product.name,
    image: product.image,
    price: parseFloat(currentPrice.value),
    originalPrice: product.originalPrice,
    // ✅ 霸王茶姬特有字段
    cupSkuId: selectedCupSku.value.skuId,  // 杯型SKU ID（订单的 linkId）
    cupSkuPriceDiff: selectedCupSku.value.priceDiff || 0,  // ✅ 杯型SKU差价
    selectedPractices: selectedProducts,  // 做法选择（订单的 selected.products，包含selAmount）
    specsText: buildSpecsText(),
    quantity: 1,
    brandOt: 128,  // ✅ 霸王茶姬品牌类型
  };

  console.log('【霸王茶姬】加入购物车 - 售价:', cartItem.price, '原价:', cartItem.originalPrice);
  console.log('【霸王茶姬】杯型SKU差价:', cartItem.cupSkuPriceDiff);
  console.log('【霸王茶姬】做法选择:', selectedProducts);
  console.log('【霸王茶姬】完整数据:', JSON.stringify(cartItem, null, 2));
  cateringStore.addToCart(cartItem);

  uni.showToast({ title: '已加入购物车', icon: 'success' });
  setTimeout(() => sheep.$router.back(), 1000);
}
</script>

<style lang="scss" scoped>
@import './common/product-detail.scss';

// 霸王茶姬特有样式
.required-mark {
  color: #ff0000;
  margin-left: 4rpx;
}

.spec-option.recommend {
  border-color: #FF6B00;
  
  .recommend-tag {
    position: absolute;
    top: -10rpx;
    right: -10rpx;
    background: #FF6B00;
    color: #fff;
    font-size: 20rpx;
    padding: 2rpx 8rpx;
    border-radius: 8rpx;
  }
}
</style>
